<template>
    <div class="page_content-container">
        <template v-if="state.totalList.length">
            <div class="content_top">
                <a
                    href="javascript:void(0)"
                    class="maxWidth1400"
                    @click="handleGoDetail(topArticleComp?.id)"
                >
                    <div class="overflow-hidden article_img">
                        <CustomImage :srcUrl="topArticleComp?.titleImage" />
                    </div>
                    <div
                        class="flex-1 bg-[#f6f7f9] py-[24px] px-[40px] flex-col article_box"
                    >
                        <span class="article_date">{{
                            handleDate(topArticleComp?.publishDate)[4]
                        }}</span>
                        <h3>{{ topArticleComp?.title }}</h3>
                        <p class="text-clamp2">
                            {{ topArticleComp?.titleDesc }}
                        </p>
                        <span class="more-button">{{ $t("home.text1") }}</span>
                    </div>
                </a>
            </div>
            <div class="content_year-list">
                <div class="maxWidth1400 flex items-center h-[75px]">
                    <span class="mr-[28px] font-light">{{
                        $t("news.text1")
                    }}</span>
                    <ul>
                        <li
                            :class="[
                                'font-bold mr-[20px]',
                                year === state.activeYear ? 'active' : '',
                            ]"
                            v-for="year in state.yearList"
                            :key="year"
                            @click="handleYearClick(year)"
                        >
                            {{ year }}
                        </li>
                    </ul>
                </div>
            </div>
            <div class="article_content">
                <div class="maxWidth1400">
                    <div
                        class="article_content-list"
                        v-for="itemList in state.dataList"
                        :key="itemList.id"
                        @click="handleGoDetail(itemList.id)"
                    >
                        <div class="article_content-left">
                            <span class="time">{{
                                handleDate(itemList?.publishDate)[1]
                            }}</span>
                            <span class="year">{{
                                handleDate(itemList?.publishDate)[0]
                            }}</span>
                            <span class="arrow"></span>
                        </div>
                        <div class="article_content-right">
                            <div class="news_link-info">
                                <h3 class="text-clamp2">
                                    {{ itemList.title }}
                                </h3>
                                <p class="text-clamp2">
                                    {{ itemList.titleDesc }}
                                </p>
                            </div>
                            <div class="news_link-img h-full">
                                <CustomImage :srcUrl="itemList.titleImage" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="maxWidth1400 article_page">
                    <span @click="handleChangePage('prev')"
                        ><el-icon :size="20" color="#000">
                            <ArrowLeft /> </el-icon
                    ></span>

                    <ul>
                        <li
                            v-for="itemPage in pageNum"
                            :class="{ active: itemPage === currentPage }"
                            @click="handleChangePage(itemPage)"
                        >
                            {{ itemPage }}
                        </li>
                    </ul>
                    <span @click="handleChangePage('next')"
                        ><el-icon :size="20" color="#000">
                            <ArrowRight /> </el-icon
                    ></span>
                </div>
            </div>
        </template>

        <template v-else>
            <el-empty :image-size="200" :description="$t('common.noData')" />
        </template>
    </div>
</template>

<script setup>
import { ArrowLeft, ArrowRight } from "@element-plus/icons-vue";
import { ARTICLE_TYPE_MAP } from "~/utils/const";

const { locale, t } = useI18n();
const route = useRoute();
const router = useRouter();
let currentPage = ref(1);
let pageNum = ref(1);
let pageSize = ref(5);
const state = reactive({
    totalList: [],
    dataList: [],
    yearList: [],
    activeYear: "",
});

const handleYearClick = async (year) => {
    state.activeYear = year;
    const res = await useGET("/v1/aricle/page", {
        query: {
            type: ARTICLE_TYPE_MAP[route.query.key],
            page: 1,
            limit: 99,
            year,
        },
    });
    if (res?.rows.length) {
        pageNum.value = Math.ceil(res.total / pageSize.value);
        state.dataList = [...res.rows.slice(0, pageSize.value)];
    } else {
        state.dataList = [];
    }
};
// 首次加载获取文章列表
const getArticleList = async (type, opt) => {
    const res = await useGET("/v1/aricle/page", {
        query: {
            type,
            page: 1,
            limit: 99,
            ...opt,
        },
    });
    if (res?.rows.length) {
        pageNum.value = Math.ceil(res.total / pageSize.value);
        state.totalList = res.rows.map((item) => {
            item.year = handleDate(item.publishDate)[0];
            return item;
        });
        state.yearList = [...new Set(state.totalList.map((item) => item.year))];
        state.dataList = [...state.totalList.slice(0, pageSize.value)];
    } else {
        state.totalList = [];
        state.dataList = [];
        state.yearList = [];
    }
};

// 切换页码
const handleChangePage = (page) => {
    if (page === "prev") {
        currentPage.value = currentPage.value === 1 ? 1 : currentPage.value - 1;
    } else if (page === "next") {
        currentPage.value =
            currentPage.value === pageNum.value
                ? pageNum.value
                : currentPage.value + 1;
    } else {
        currentPage.value = page;
    }
    state.dataList = state.totalList.slice(
        (currentPage.value - 1) * pageSize.value,
        currentPage.value * pageSize.value
    );
};

// 跳转新闻详情页
const handleGoDetail = (id) => {
    if (id) router.push(`/detail?id=${id}`);
};

onMounted(() => {
    // 页面初始化加载数据
    getArticleList(ARTICLE_TYPE_MAP[route.query.key]);
});

// 生成第一条置顶的文章信息,未有置顶文章则展示第一条
const topArticleComp = computed(() => {
    if (state.totalList.length) {
        const topData = state.totalList.find((item) => item.top === 0);
        return topData || state.totalList[0];
    }
    return {};
});
// 监听语言变化，重新获取文章数据
watch(
    () => locale.value,
    (val) => {
        getArticleList(ARTICLE_TYPE_MAP[route.query.key]);
    }
);
</script>
<style lang="scss" scoped>
.page_content-container {
    .content_top .maxWidth1400 {
        display: flex;
        flex-wrap: wrap;
        padding: 80px 0;
        min-height: 368px;
        .article_img {
            width: 60%;
            img:hover {
                transform: scale(1.1);
            }
        }

        .article_box {
            display: flex;
            flex-direction: column;
            color: #000;
            justify-content: center;
            .article_date {
                display: block;
                font-size: 14px;
                letter-spacing: 1.2px;
                margin-bottom: 32px;
                color: #000;
            }
            h3 {
                margin-bottom: 28px;
                line-height: 30px;
                transition: all 0.4s ease;
                font-size: 18px;
                cursor: pointer;
                &:hover {
                    color: #0058ce;
                }
            }
            .text-clamp2 {
                font-size: 14px;
                color: #333;
                line-height: 24px;
                margin-bottom: 46px;
            }
        }
    }
}

@media screen and (max-width: 1200px) {
    .content_top .maxWidth1400 {
        .article_img {
            width: 550px;
        }
    }
}
</style>
